<template>
  <div class="articleWrite">
      <div class="writeTitle">
        <div class="editorTypeBtnDiv">
          <span class="editorTypeBtn btn btn-primary btn-lg writeBtn btn-sm" @click="editorTypeChange" role="button">更换编辑器</span>
          <span>{{editorName}}</span>
        </div>
        <input v-model="aTitle" type="text" class="form-control" placeholder="标题">
        <input v-model="aBrief" type="text" class="form-control" placeholder="简介">
      </div>
      <div v-if="markdownValue" id="editor">
        <mavon-editor v-model="value" style="height: 600px;width: 1080px;margin-left: 130px"></mavon-editor>
      </div>
      <div class="editor" v-else="!markdownValue" >
        <v-editor class="vEditor"></v-editor>
      </div>
    <div class="writeTitle">
      <div class="editorTypeBtnDiv">
        <span class="editorTypeBtn btn btn-primary btn-lg writeBtn btn-sm" @click="save()" role="button">保存</span>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  import editor from './aticleEditor.vue'
  import $ from 'jquery'
//  import axios from 'axios'
  export default {
    name: 'articleWriteCom',
    components: {
      mavonEditor,
      'v-editor': editor
    },
    data: function () {
      return {
        aTitle: '',
        aBrief: '',
        value: '',
        editorName: 'markdown编辑器',
        markdownValue: true,
        articleKeys: [
          {name: 'title'},
          {name: 'brief'},
          {name: 'content'}
        ],
        articleList: [],
        apiUrl: 'http://localhost:8080/article/save.do'
      }
    },
    methods: {
      editorTypeChange () {
        this.markdownValue = !this.markdownValue
        if (this.editorName === 'markdown编辑器') {
          this.editorName = '富文本编辑器'
        } else if (this.editorName === '富文本编辑器') {
          this.editorName = 'markdown编辑器'
        }
      },
      save () {
//        axios.get(this.apiUrl, {
//          params: {
//            title: this.aTitle,
//            brief: this.aBrief,
//            content: this.value,
//            account: 'root'
//          }
//        }).then(response => {
//          console.log(response)
//          console.log(response.status)
//        }).catch(error => {
//          console.log(error)
//        })
        $.post(this.apiUrl,
          {
            title: this.aTitle,
            brief: this.aBrief,
            content: this.value,
            account: 'root'
          }, (data, status) => {
            console.log(data)
            console.log(status)
          })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .articleWrite
    margin 50px
  .editor
    margin-left 130px
    margin-right 130px
  .form-control
    margin-left 130px
    width 1080px
    border-color #fff
  .editorTypeBtnDiv
    margin 10px 130px
  .editorTypeBtn
    background-color #5c8bb7
    border-color #5c8bb7
</style>
